import React ,{useState}from 'react'
import { ResultPage, Card } from 'antd-mobile'
import { Input } from 'antd-mobile'
import { LoopOutline } from 'antd-mobile-icons'
import { Button, Space } from 'antd-mobile'
import './index.css'
import { useNavigate } from 'react-router-dom'
import { Image } from 'antd-mobile'
function Index() {
    // 首页
    let nav=useNavigate()
    const [start, setstart] = useState('')
    const [end, setend] = useState('')
    const exchange=()=>{
        let temp=start;
        setstart(end);
        setend(temp);
    }
    const ss=()=>{
        nav(`/list?start=${start}&end=${end}`)
    }
    const demoSrc =''
  return (
    <div>
     <ResultPage
      status=''
      title='火车票预订'
      description='便捷购票，服务您的每一次出行'
    >
      <ResultPage.Card style={{ height: 200, padding: 8 }}>
        <div style={{display:'flex',backgroundColor:'#f2f2f2',margin:'10px',borderRadius:'20px'}}>
        <Input
          placeholder='请输入内容'
          value={start}
          onChange={val => {
            setstart(val)
          }}
        />
        <LoopOutline style={{fontSize:'50px'}} onClick={()=>exchange()}/>
          <Input
          placeholder='请输入内容'
          value={end}
          onChange={val => {
            setend(val)
          }}
        />
        </div>
        <div style={{display:'flex',backgroundColor:'#f2f2f2',margin:'10px',borderRadius:'20px'}}>
     <h2>5月9日&emsp;<span style={{fontSize:'15px',color:'gray'}}>明天</span></h2>
        </div>
        <Button block color='primary' size='large' 
        style={{backgroundColor:'gray'}}
        onClick={()=>ss()}>
         查询
        </Button>
      </ResultPage.Card>

      <Card style={{ height: 128, marginTop: 12 ,display:'flex'}} >
        <div style={{display:'flex'}}>
        
            <div style={{backgroundColor:'#f2f2f2',width:'50px',height:'50px',borderRadius:'50px'}} >
            <Image src={demoSrc} style={{width:'30px',height:'30px',marginLeft:'10px',marginTop:'10px'}}/>
            <p>12306账号</p> 
          
        </div>
        &emsp;  &emsp;  &emsp;  &emsp;  &emsp;  &emsp;  &emsp;  &emsp;
        <div style={{backgroundColor:'#f2f2f2',width:'50px',height:'50px',borderRadius:'50px'}} >
            <Image src={demoSrc} 
            style={{width:'30px',height:'30px',marginLeft:'10px',marginTop:'10px'}}
            onClick={()=>nav('/order')}
            />
            <p>我的订单</p> 
            </div>
            &emsp;  &emsp;  &emsp;  &emsp;  &emsp;  &emsp;  &emsp;  &emsp;
            <div style={{backgroundColor:'#f2f2f2',width:'50px',height:'50px',borderRadius:'50px'}} >
            <Image src={demoSrc} style={{width:'30px',height:'30px',marginLeft:'10px',marginTop:'10px'}}/>
            <p>帮助中心</p> 
            </div>
        </div>
       
      </Card>
    </ResultPage>
    </div>
  )
}

export default Index
